<!-- 员工管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form :model="form" :inline="true" label-width="auto">
        <el-form-item label="员工姓名:">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入员工姓名"
            style="width: 170px"
          />
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input
            v-model="form.mobile"
            clearable
            placeholder="请输入联系方式"
            style="width: 170px"
          />
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input
            v-model="form.idCard"
            clearable
            placeholder="请输入身份证号"
            style="width: 170px"
          />
        </el-form-item>
        <el-form-item label="所属部门:">
          <el-select v-model="form.departmentId" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in departmentList"
              :label="item.name"
              :value="item.id as unknown as string"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属岗位:">
          <el-select v-model="form.roleId" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id as unknown as string"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="form.carer" placeholder="请选择" style="width: 120px">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="staffTable">
        <!-- 按钮 -->
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增员工
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #roles="{ scope }">
          {{ scope.row.roles.map((item: role) => item.name).join(" ") }}
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button size="small" text class="btn" @click="">禁用</el-button>
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { Search, Refresh, Delete, Edit } from "@element-plus/icons-vue";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { staffList, staffDel, staffDelAll } from "@/api/personel/staff/staff";
import { role, staffParams } from "@/api/personel/staff/type";
import { getDepartmentList } from "@/api/personel/department/department";
import { ListDatas } from "@/api/personel/department/type";
import { RoleList } from "@/api/personel/position/position";
import { listData, listParams } from "@/api/personel/position/type";
import { useRouter } from "vue-router";
const router = useRouter();

const form = reactive<staffParams>({
  name: "",
  page: 1,
  pageSize: 10,
  mobile: "",
  idCard: "",
  departmentId: undefined,
  roleId: undefined,
  carer: undefined,
});

// 部门列表
const departmentList = ref<ListDatas[]>([]);
const getDepartList = async () => {
  let res = await getDepartmentList();
  // console.log('部门列表', res);
  departmentList.value = res.list;
};

// 岗位列表
const RoleParams = reactive<listParams>({
  page: 1,
  pageSize: 1000,
});
const roleList = ref<listData[]>([]);
const getRoleList = async () => {
  let res = await RoleList(RoleParams);
  console.log("岗位列表", res);
  roleList.value = res.list;
};

// 查询
const staffTable = ref();
const search = () => {
  staffTable.value.getData(form);
};

// 重置
const reset = () => {
  form.name = "";
  form.mobile = "";
  form.idCard = "";
  form.departmentId = undefined;
  form.roleId = undefined;
  form.carer = undefined;
};

// 添加
const add = () => {
  router.push("/personel/staff-add");
};

// 编辑
const uploadEdit = (id: number) => {
  console.log(id);

  router.push({ path: "/personel/staff-add/", query: { id: id } });
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: staffList,
  delete: staffDel,
  deleteAll: staffDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "photo",
      label: "头像",
      attrs: {
        width: "70px",
      },
      image: true,
    },
    {
      prop: "name",
      label: "姓名",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "mobile",
      label: "联系方式",
    },
    {
      prop: "idCard",
      label: "身份证号",
      attrs: {
        width: "142px",
      },
    },
    {
      prop: "departmentName",
      label: "所属部门",
    },
    {
      prop: "roles",
      label: "所属岗位",
      slot: true,
    },
    {
      prop: "adminUserName",
      label: "账号",
    },
    {
      prop: "adminPwd",
      label: "密码",
    },
    {
      prop: "addAccountName",
      label: "创建人",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: "168px",
      },
    },
  ],
});

onMounted(() => {
  getRoleList();
  getDepartList();
});
</script>

<style lang="less" scoped>
.btn {
  width: 40px;
  color: rgb(64, 158, 255);
  border: none;
}

.btn:last-child {
  color: rgb(245, 108, 127);
}
</style>
